<template>
    <view class="container">
        <view class="header">
            <view class="avatar">
                <image :src="CardInfo.card_logo" />
            </view>
            <view class="name">
                {{ CardInfo.card_nickname }}
            </view>
            <view class="job">
                {{ CardInfo.card_job }}
            </view>
            <view class="company">
                {{ CardInfo.card_company }}
            </view>
        </view>

        <view class="menu">
            <!-- 除了H5其他都显示 -->
            <!-- #ifndef H5-->
            <view class="item">
                <uv-button type="default" :plain="true" text="同步通讯录" :custom-style="syncBtn"
                    @click="OnAddContact"></uv-button>
            </view>

            <view class="item">
                <uv-button type="default" :plain="true" text="分享名片" :custom-style="relayBtn"
                    open-type="share"></uv-button>
            </view>
            <!-- #endif -->
        </view>

        <view class="info">
            <view class="title">信息</view>

            <view class="list">
                <view class="item">
                    <view class="content">
                        <view class="name">手机</view>
                        <view class="value">{{ CardInfo.card_mobile }}</view>
                    </view>
                    <view class="icon">
                        <image src="/static/images/tel.png" />
                    </view>
                </view>

                <view class="item">
                    <view class="content">
                        <view class="name">邮箱</view>
                        <view class="value">{{ CardInfo.card_email }}</view>
                    </view>
                    <view class="icon">
                        <image src="/static/images/email.png" />
                    </view>
                </view>

                <view class="item">
                    <view class="content">
                        <view class="name">地址</view>
                        <view class="value">{{ CardInfo.card_address }}</view>
                    </view>
                    <view class="icon">
                        <image src="/static/images/site.png" />
                    </view>
                </view>
            </view>

        </view>
    </view>

    <uv-toast ref="NoticeRef"></uv-toast>

</template>

<script setup>
const syncBtn = ref({
    color: '#3b82f6',
    background: 'transparent',
    width: '100%',
    border: '1px solid #3b82f6',
    fontSize: '28rpx',
    borderRadius: '12px',
    height: '80rpx'
});

const relayBtn = ref({
    color: '#3b82f6',
    background: 'transparent',
    width: '100%',
    border: '1px solid #3b82f6',
    fontSize: '28rpx',
    borderRadius: '12px',
    height: '80rpx'
});

const CardInfo = ref({});

const NoticeRef = ref(null);

onLoad(() => {
    GetCardInfoData();
})

const GetCardInfoData = async () => {
    const result = await uni.$uv.http.post('/index/index')

    console.log(result)
    if (result.code === 1) {
        CardInfo.value = result.data;
    }
}

const OnAddContact = () => {
    uni.addPhoneContact({
        photoFilePath: CardInfo.value.card_logo,
        nickName: CardInfo.value.card_nickname,
        firstName: CardInfo.value.card_nickname,
        organization: CardInfo.value.card_company,
        title: CardInfo.value.card_job,
        mobilePhoneNumber: CardInfo.value.card_mobile,
        weChatNumber: CardInfo.value.card_mobile,
        email: CardInfo.value.card_email,
        workAddressStreet: CardInfo.value.card_address,
        success: () => {
            NoticeRef.value.show({
                type: 'success',
                message: '保存通讯录成功'
            })
        },
        fail: (error) => {
            NoticeRef.value.show({
                type: 'error',
                message: `保存通讯录失败:${error.errMsg}`
            })
        }
    });
}

onShareAppMessage(() => {
    return {
        title: `${CardInfo.value.card_company}的名片`,
        path: '/pages/card/card',
        imageUrl: CardInfo.value.card_logo
    }
})
</script>

<style lang="scss">
@import '@/static/styles/theme.scss';

page {
    background-color: $bg-color;
}

.container {
    @extend .page-container;
}

.header {
    @extend .card;
    padding: 60rpx 40rpx;
    text-align: center;
    background: linear-gradient(135deg, $card-bg 0%, lighten($primary-color, 35%) 100%);

    .avatar {
        width: 160rpx;
        height: 160rpx;
        overflow: hidden;
        border-radius: 50%;
        margin: 0 auto;
        box-shadow: 0 4px 12px rgba($primary-color, 0.2);

        image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .name {
        margin-top: 24rpx;
        font-weight: 600;
        font-size: 36rpx;
        color: $text-primary;
    }

    .job {
        font-size: 28rpx;
        color: $text-light;
        margin: 16rpx 0;
    }

    .company {
        font-size: 28rpx;
        color: $text-light;
    }
}

.menu {
    display: flex;
    justify-content: space-between;
    margin-top: 40rpx;
    padding: 0 20rpx;

    .item {
        width: 48%;
    }
}

.info {
    @extend .card;
    margin-top: 40rpx;
    padding: 40rpx;

    .title {
        font-size: 32rpx;
        font-weight: 600;
        color: $text-primary;
        margin-bottom: 30rpx;
    }

    .list {
        .item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 24rpx 0;
            border-bottom: 1px solid $border-color;

            &:last-child {
                border-bottom: none;
            }

            .content {
                display: flex;
                align-items: center;
                font-size: 28rpx;

                .name {
                    color: $text-secondary;
                    margin-right: 20rpx;
                    position: relative;

                    &::after {
                        content: '';
                        width: 1px;
                        height: 20rpx;
                        background-color: $border-color;
                        position: absolute;
                        right: -10rpx;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }

                .value {
                    color: $text-primary;
                    margin-left: 20rpx;
                }
            }

            .icon {
                width: 40rpx;
                height: 40rpx;
                display: flex;
                align-items: center;
                justify-content: center;

                image {
                    width: 100%;
                    height: 100%;
                    opacity: 0.7;
                }
            }
        }
    }
}
</style>